<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width:200px;
            height:200px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="box1">
    
</div>
     <script>
         class Dorp{
             constructor(box1,doc){
             this.box1 = document.querySelector(box1);
             this.doc = doc;
             }
             show(){
                 var oDiv = this.box1;
                 var doc = this.doc;
                 this.box1.onmousedown = function (ev) {
                     console.log(this)
                     var ev = ev||ev.event;
                     var x = ev.clientX-this.offsetLeft;
                     console.log(x)
                     var y = ev.clientY-this.offsetTop;
                     doc.onmousemove = function(ev){
                         var ev1 = ev||ev.event;
                         oDiv.style.left = ev1.clientX - x+"px";
                         oDiv.style.top = ev1.clientY-y+"px";
                     }
                     doc.onmouseup = function () {
                         document.onmousemove = null;
                     }
                     return false;
                 }
             }
             }

         window.onload =function () {
             var p1 = new Dorp("#box1",document)
              p1.show();
         }
     </script>
</body>
</html>